<template>
	<div class="order-box">
		<!--没有收藏-->
		<ZxyhHeader v-if="getPlatform='app'" :title="'我的预约'" :isClose='false'></ZxyhHeader>
		<div  v-else class="order-box-title">
			<div class="back" v-if="isBack" @click="mineCollectBack"></div>
			<p>我的预约</p>
		</div>
		<div class="order-main-box">
            <NavCom :navTabs='navTabs' @navCom="navCom"></NavCom>
			<div class="order-main-container" ref="mainContainer">
				<!-- 预约中 -->
				<div v-if="isTabId =='0'">		
				<ul class="order-main-ul">
					<div v-if="orderList.length<1" class="no-data">
                         <img src="../../assets/images/zxyh/my/no_order.png" alt="">
						 <p>您还没有预约中的记录哦～</p>
					</div>
					<li v-else class="order-main-li" v-for="item in orderList" :key="item.roomId" @click="orderLink(item)">
						<p class="date">{{item.beginTime}}</p>
						<div class="order-img-box">
							<LiveStatus :status="item.roomStatus"></LiveStatus>
							<img :src="item.imagUrl+'?x-oss-process=image/resize,m_fixed,h_390,w_690'" alt="">
						</div>
						<div class="order-main-title">
							<p>{{item.title}}</p>
							<p>{{item.intro}}</p>
						</div>
					</li>
			  </ul>
				</div>
			  <div v-if="isTabId =='1'">
				  <div v-if="historyOrderList.length<1" class="no-data">
                         <img src="../../assets/images/zxyh/my/no_order.png" alt="">
						 <p>您还没有历史预约记录哦～</p>
					</div>
					 <van-list
					 v-else
						v-model="loading"
						:finished="finished"
						:immediate-check="false"
						finished-text="没有更多了"
						@load="onLoad"
						:offset="10"
						>
				  <ul  class="order-main-ul">
					 
					<li class="order-main-li" v-for="item in historyOrderList"  :key="item.roomId" @click="orderLink(item)">
						<p class="date">{{item.beginTime}}</p>
						<div class="order-img-box">
							<LiveStatus :status="item.roomStatus"></LiveStatus>
							<img :src="item.imagUrl+'?x-oss-process=image/resize,m_fixed,h_390,w_690'" alt="">
						</div>
						<div class="order-main-title">
							<p>{{item.title}}</p>
							<p>{{item.intro}}</p>
						</div>
					</li>
					
			  </ul>
			  </van-list>
			  </div>
			</div>
		</div>
		
	</div>
</template>
<script>
import ZxyhHeader from '@/components/zxyh/zxyhHeader'
import NavCom from '../my/components/navCom.vue'
import LiveStatus from '../my/components/liveStatus.vue'//直播状态
	export  default{
		components:{
		 ZxyhHeader,
		 NavCom,
		 LiveStatus
		},
		data(){
			return {
			  tipImg:false,
			  page:1,
			  flag:true,
			  isBack:false,//返回按钮显示不显示
			  getPlatform:fun.getPlatform(), //app wx
			  navTabs:[{title:'预约中',id:0},{title:'历史预约',id:1},],
			  isTabId:'0', //0 预约中 1 历史预约
			  page:1,
			  loading: false,
			  finished: false,
			  orderList:[],//预约中 数据一次全返回
			  historyOrderList:[],//历史预约需分页
			}
		},
		created:function(){
          this.dotNumPage();//页面打点
		  this.getOrderList();
          var ua = navigator.userAgent.toLowerCase();
		  this.isBack = (/MicroMessenger/i).test(ua) //微信
		},
		 mounted:function(){
			 this.$store.dispatch("hideNav");
        },
		  methods:{
			//   tab切换
			navCom(data){
				this.page = 1;
				this.$refs.mainContainer.scrollTop = 0
				this.isTabId = data.data.id
				this.orderList = []
				this.historyOrderList = []
				this.getOrderList();
			},  
			//滚动加载时触发，list组件定义的方法
			onLoad() {
				this.page++;
				this.getOrderList();
			},
			getOrderList(){    
				this.$http.get("/h5live/personCenter/remind?remindType=" + this.isTabId + "&page="+ this.page + "&pageSize=10").then(
					res => {
						const {code,data} = res.data
						if(code=='000000'){
						if(data && data!=null){
							if(this.isTabId == 0){
                                   this.orderList = [...data.live,...data.pre_live]//预约中
							}else{//历史预约
								this.loading = false
								this.historyOrderList = this.historyOrderList.concat(data.closed_live)
								if(data.closed_live.length<10){
									this.finished = true;
								}						
							}
						}
              
            }	
						}
			).catch(err=>{});
          },
		  	dotNumPage(){//统计
				let _this = this;
				var argumentData = {
					sessionId: "mineOrder_page", //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource:fun.getPlatform(),//微信 app 游客为web
					url:window.location.href,//当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
				
			},
		    orderLink(item){
					this.$router.push(`/${this.$channel}/liveRoom/${item.roomId}?dzhPage=true`);  	
		    },
     },
	 watch:{	
	 }
	}
</script>
<style scoped="scoped">
.order-box{
	height: 100vh;
	width: 100vw;
}

.order-box .header-conatiner-zxyhIos,
.header-conatiner {
  overflow: hidden;
  /* position: absolute */
  position: relative;
  left: 0px;
  top: 0px;
  /* background: url('../../zxyhPages/newHomeCom/zxyhBG.png') no-repeat center; */
  background-size: cover;
}
.order-main-box{
	height: calc(100vh - 88px);
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: hidden;
}
.header-conatiner-zxyhIos ~ .order-main-box{
	height: calc(100vh - 148px);
	overflow-y: hidden;

}
.order-main-container{
	height: 100%;
	width: 100%;
	overflow-y: auto;
}
.order-box-title{
	position: relative;
}
.back{
	width: 65px;
	height: 55px;
	background: url(../../assets/images/iconsmall.png) no-repeat;
	background-size: 150px  150px;
	position: absolute;
	top: 20px;
	left: 40px;
}
.order-box-title p{
	width: 100%;
	height: 80px;
	font-size: 36px;
	text-align: center;
	line-height: 80px;
	color: #333333;
}
.order-main-ul{
	width: 100%;
	overflow-y: auto;
}
.order-main-li{
	padding: 30px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-bottom: 6px solid #F7F7F7;
}
.order-main-li .date{
	width: calc(100vw - 60px);
	margin-bottom: 12px;
	display: flex;
    font-size: 30px;
	font-weight: 400;
	color: #666666;
	line-height: 42px;
	letter-spacing: 1px; 
}
.order-main-li .date::before{
	content: " ";
	display: inline-block;
	margin-right: 10px;
	height: 40px;
	width: 40px;
	background: url('../../../src/assets/images/zxyh/my/date.png') no-repeat;
	background-size: 100% 100%;
}
.order-img-box{
	position: relative;
	height: 390px;
	width: calc(100vw - 60px);
	margin-bottom: 18px;
}
.order-img-box img{
	display: block;
	height: 100%;
	width: 100%;
	border-radius: 24px;
}
.order-img-box .live-status-box{
	position: absolute;
	top: 30px;
	right: 30px;
}
.order-main-title{
	width: calc(100vw - 60px);
}
.order-main-title p{
	width: 100%;
	color:red;
	font-size: 30px;
	font-weight: 400;
	color: #333333;
	letter-spacing: 1px;
	overflow-x: hidden;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.order-main-title p:nth-of-type(2){
	margin-top: 4px;
	font-size: 28px;
	font-weight: 400;
	color: #ACACAC;
	line-height: 40px;
}
.no-data{
      display: flex;
     flex-direction: column;
     align-items: center;
	 padding-top: 170px;
	}
.no-data img{
		display: block;
		height: 326px;
		width: 326px;
	}
.no-data p{
		font-size: 30px;
		font-weight: 400;
		color: #999999;
		line-height: 42px;
		letter-spacing: 1px;
	}
</style>